import React, { useState, useEffect, useRef } from 'react';
import OpenAI from 'openai';
import SortingControlPanel from '../../components/SortingControlPanel';
import '../../components/SortingControlPanel.css';
import './QuickSortPlayground.css';

// 配置阿里云百炼AI
const openai = new OpenAI({
  apiKey: 'sk-e50e6d73580e411ca5bbebdda74eedcf',
  baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
  dangerouslyAllowBrowser: true
});

const QuickSortPlayground = () => {
  // 完全按照冒泡排序的状态结构
  const [data, setData] = useState([]);
  const [animationSpeed, setAnimationSpeed] = useState(500);
  const [isRunning, setIsRunning] = useState(false);
  const [isPaused, setIsPaused] = useState(false);
  const [isStepping, setIsStepping] = useState(false);
  const [currentStep, setCurrentStep] = useState(0);
  const [totalSteps, setTotalSteps] = useState(0);
  const [status, setStatus] = useState('就绪');
  const [dataMode, setDataMode] = useState('random');

  const [customData, setCustomData] = useState('');
  const [dataError, setDataError] = useState('');
  const [dataSize, setDataSize] = useState(10);

  // 新增：左侧面板状态
  const [activeTab, setActiveTab] = useState('settings'); // 'settings' 或 'chat'
  const [chatMessages, setChatMessages] = useState([]);
  const [chatInput, setChatInput] = useState('');
  const [isAIResponding, setIsAIResponding] = useState(false);

  // AI对话历史（用于维护上下文）
  const [aiChatHistory, setAiChatHistory] = useState([]);

  // 建议问题状态
  const [suggestedQuestions, setSuggestedQuestions] = useState([
    '生成一组极端快速排序测试用例',
    '用Java语言实现快速排序',
    '快速排序的优化方法有哪些'
  ]);

  // 新增：面板宽度调整
  const [leftPanelWidth, setLeftPanelWidth] = useState(350); // 默认350px
  const [isDragging, setIsDragging] = useState(false);
  const containerRef = useRef(null);

  // 完全按照冒泡排序的ref结构
  const animationTimeouts = useRef([]);
  // 快速排序特有的状态：递归栈、当前分区范围、基准值等
  const sortingState = useRef({ 
    stack: [], // 递归栈，存储待排序的区间
    currentLeft: -1,
    currentRight: -1,
    pivotIndex: -1,
    partitionIndex: -1,
    phase: 'idle' // 'partition', 'compare', 'swap', 'complete'
  });
  const dataRef = useRef([]);
  const barsRef = useRef([]);
  const dataDisplayRef = useRef(null);

  // 添加运行状态的ref，避免React状态更新延迟问题
  const runningStateRef = useRef({
    isRunning: false,
    isPaused: false,
    isStepping: false
  });

  // 清除所有定时器 - 完全按照冒泡排序版本
  const clearAllTimeouts = () => {
    animationTimeouts.current.forEach(timeoutId => {
      clearTimeout(timeoutId);
    });
    animationTimeouts.current = [];
  };

  // 真实AI调用函数
  const getAIResponse = async (userMessages) => {
    try {
      // 构建完整的消息数组，包含系统提示词
      const systemPrompt = {
        role: "system",
        content: `# 角色
你是一位专业的AI辅助，擅长处理基础算法和数据结构问题，并能够根据用户的需求生成相应的测试数据或解答疑惑。

## 结构化回复模板
{
    "status": <0或1>,
    "data": <指定数据，通常用数组格式，可为null>,
    "message": <回复的内容，字符串>,
    "associate1" : <通过对方的提问以及回答，联想的问题1>,
    "associate2" : <通过对方的提问以及回答，联想的问题2>,
    "associate3" : <通过对方的提问以及回答，联想的问题3>
}

## 技能

### 技能1：答案识别与回应
- **任务**：根据用户发来的信息，通过合理判断，返回一个JSON格式的数据。且对应JSON字段里的\`status\`值，只有两种可能性。
  - 如果用户发来的信息包含但不限于"生成"、"测试数据"等关键字，\`status\`为1，同时\`data\`字段为生成的数据，且\`message\`字段为几乎固定的回复。生成的每个联想问题最好不超过15字。例如：
    {
        "status": 1,
        "data": [5, 4, 3, 2, 1],
        "message": "已生成符合你要求的数据！",
        "associate1" :  "有没有最好情况的数据",
        "associate2" :  "你给出的数据的时间复杂度是多少",
        "associate3" :  "有没有办法进一步优化算法"
    }
  - 如果通过你的判断，用户的提问是为了解答疑惑，而非生成测试样例，那么\`status\`为0，\`data\`为null，且正常生成回复。例如：
    {
        "status": 0,
        "data": null,
        "message": "快速排序通过分治法将数组分为两部分，递归排序每一部分",
        "associate1" : "快速排序的时间复杂度是多少",
        "associate2" : "快速排序适用于什么场景",
        "associate3" : "快速排序和归并排序的区别"
    }

## 限制

- 每次回复的内容必须是一个结构化数据（JSON格式），不能有其他任何多余的文字。
- 包括接下来括号里的东西，也不要在回复中出现！！这非常重要，否则会影响网页的渲染。右边括号内的内容不允许出现('''json)
- 如果message字段中包含代码，必须使用标准的Markdown代码块格式：三个反引号+语言名+换行+代码内容+换行+三个反引号
- 代码块必须指定正确的语言标识符，如：java、python、c、javascript等

`
      };

      const messages = [systemPrompt, ...userMessages];

      const completion = await openai.chat.completions.create({
        model: "qwen-plus",
        messages: messages,
      });
      return completion.choices[0].message.content;
    } catch (error) {
      console.error("Error fetching AI response:", error);
      throw error;
    }
  };

  // 处理拖拽
  const handleMouseDown = (e) => {
    setIsDragging(true);
    e.preventDefault();
  };

  const handleMouseMove = (e) => {
    if (!isDragging || !containerRef.current) return;
    
    const containerRect = containerRef.current.getBoundingClientRect();
    const newWidth = e.clientX - containerRect.left;
    
    if (newWidth >= 300 && newWidth <= 1000) {
      setLeftPanelWidth(newWidth);
    }
  };

  const handleMouseUp = () => {
    setIsDragging(false);
  };

  useEffect(() => {
    if (isDragging) {
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
      document.body.style.cursor = 'col-resize';
      document.body.style.userSelect = 'none';
    }

    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
      document.body.style.cursor = '';
      document.body.style.userSelect = '';
    };
  }, [isDragging]);

  // 重置排序状态
  const resetSortingState = () => {
    setCurrentStep(0);
    setTotalSteps(0);
    clearAllTimeouts();

    // 清除所有DOM样式
    if (barsRef.current) {
      barsRef.current.forEach(bar => {
        if (bar) {
          bar.classList.remove('pivot', 'comparing', 'swapping', 'left-partition', 'right-partition', 'sorted', 'current-range');
        }
      });
    }

    // 重置快速排序状态
    sortingState.current = {
      stack: [],
      currentLeft: -1,
      currentRight: -1,
      pivotIndex: -1,
      partitionIndex: -1,
      phase: 'idle'
    };
  };

  // 停止排序
  const stopSorting = () => {
    // 清除所有定时器
    clearAllTimeouts();

    runningStateRef.current.isRunning = false;
    runningStateRef.current.isPaused = false;
    runningStateRef.current.isStepping = false;

    setIsRunning(false);
    setIsPaused(false);
    setIsStepping(false);
    resetSortingState();
    renderData(dataRef.current);
    setStatus('已停止');
  };

  // 暂停排序
  const pauseSorting = () => {
    runningStateRef.current.isPaused = true;
    setIsPaused(true);
    setStatus('已暂停');
  };

  // sleep函数
  const sleep = (ms) => {
    return new Promise(resolve => {
      const timeout = setTimeout(resolve, ms);
      animationTimeouts.current.push(timeout);
    });
  };

  // 渲染数据到DOM
  const renderData = (dataArray) => {
    if (!dataDisplayRef.current) return;

    const container = dataDisplayRef.current;
    container.innerHTML = '';
    barsRef.current = [];

    if (dataArray.length === 0) {
      // 显示空状态
      const emptyState = document.createElement('div');
      emptyState.className = 'empty-state';
      emptyState.innerHTML = '<p>点击"生成数据"开始</p>';
      container.appendChild(emptyState);
      return;
    }

    const maxValue = Math.max(...dataArray);

    dataArray.forEach((value, index) => {
      const bar = document.createElement('div');
      bar.className = 'quick-data-bar';
      bar.style.height = `${(value / maxValue) * 250}px`;

      const valueSpan = document.createElement('span');
      valueSpan.className = 'value';
      valueSpan.textContent = value;
      bar.appendChild(valueSpan);

      container.appendChild(bar);
      barsRef.current[index] = bar;
    });
  };

  // 交换相邻的柱状图
  const swapBars = async (index1, index2) => {
    const bar1 = barsRef.current[index1];
    const bar2 = barsRef.current[index2];

    if (!bar1 || !bar2) return;

    // 获取当前位置
    const rect1 = bar1.getBoundingClientRect();
    const rect2 = bar2.getBoundingClientRect();
    const distance = rect2.left - rect1.left;

    // 设置过渡效果
    bar1.style.transition = `transform ${animationSpeed / 3}ms ease`;
    bar2.style.transition = `transform ${animationSpeed / 3}ms ease`;

    // 执行移动动画
    bar1.style.transform = `translateX(${distance}px)`;
    bar2.style.transform = `translateX(${-distance}px)`;

    // 等待动画完成
    await sleep(animationSpeed / 3);

    // 交换DOM元素位置
    const parent = bar1.parentNode;
    const nextSibling = bar1.nextSibling === bar2 ? bar1 : bar1.nextSibling;
    parent.insertBefore(bar1, bar2.nextSibling);
    parent.insertBefore(bar2, nextSibling);

    // 交换bars数组中的引用
    [barsRef.current[index1], barsRef.current[index2]] = [barsRef.current[index2], barsRef.current[index1]];

    // 重置transform和transition
    bar1.style.transform = '';
    bar2.style.transform = '';
    bar1.style.transition = '';
    bar2.style.transition = '';
  };

  // 验证自定义数据
  const validateCustomData = (input = customData) => {
    if (!input.trim()) return true;

    // 检查格式：只允许数字和逗号
    const regex = /^[0-9,\s]+$/;
    if (!regex.test(input)) {
      setDataError('输入格式有误：只能包含数字和逗号');
      return false;
    }

    // 检查是否有有效数字
    const numbers = input.split(',').map(s => s.trim()).filter(s => s !== '');
    if (numbers.length === 0) {
      setDataError('请输入至少一个数字');
      return false;
    }

    // 检查每个数字是否有效
    for (let num of numbers) {
      if (isNaN(parseInt(num)) || parseInt(num) < 1 || parseInt(num) > 100) {
        setDataError('数字必须在1-100之间');
        return false;
      }
    }

    if (numbers.length > 30) {
      setDataError('数据数量不能超过30个');
      return false;
    }

    setDataError('');
    return true;
  };

  // 生成随机数据
  const generateRandomData = () => {
    const size = parseInt(dataSize);
    if (size > 30) {
      alert('数据数量不能超过30个');
      return;
    }
    if (size < 3) {
      alert('数据数量不能少于3个');
      return;
    }
    const newData = [];
    for (let i = 0; i < size; i++) {
      newData.push(Math.floor(Math.random() * 100) + 1);
    }
    setData(newData);
    dataRef.current = [...newData];
    renderData(newData);
    resetSortingState();
    setStatus('就绪');
  };

  // 生成自定义数据
  const generateCustomData = () => {
    if (!validateCustomData()) {
      return;
    }

    const input = customData.trim();
    if (!input) {
      setDataError('请输入数据');
      return;
    }

    const newData = input.split(',')
      .map(s => s.trim())
      .filter(s => s !== '')
      .map(s => parseInt(s));

    setData(newData);
    dataRef.current = [...newData];
    renderData(newData);
    resetSortingState();
    setStatus('就绪');
  };

  // 处理生成数据
  const handleGenerateData = () => {
    if (isRunning && !isPaused) {
      return;
    }

    stopSorting();

    if (dataMode === 'custom' && customData.trim()) {
      generateCustomData();
    } else {
      generateRandomData();
      if (dataMode === 'custom') {
        setCustomData('');
        setDataError('');
      }
    }
  };

  // 处理自定义数据输入
  const handleCustomDataChange = (e) => {
    const value = e.target.value;
    setCustomData(value);
    setDataError('');

    if (value.trim()) {
      try {
        validateCustomData(value);
      } catch (error) {
        setDataError('数据格式错误，请输入用逗号分隔的数字');
      }
    }
  };

  // AI聊天功能
  const handleSendMessage = async (message) => {
    if (!message.trim() || isAIResponding) return;

    // 添加用户消息
    const userMessage = {
      id: Date.now(),
      type: 'user',
      content: message,
      timestamp: new Date()
    };

    setChatMessages(prev => [...prev, userMessage]);
    setChatInput('');
    setIsAIResponding(true);

    try {
      // 构建对话历史
      const newChatHistory = [
        ...aiChatHistory,
        { role: "user", content: message }
      ];

      // 调用真实AI
      const aiResponseText = await getAIResponse(newChatHistory);

      // 解析AI回复的JSON
      let aiResponse;
      try {
        aiResponse = JSON.parse(aiResponseText);
      } catch (parseError) {
        // 如果不是JSON格式，当作普通回复处理
        aiResponse = {
          status: 0,
          data: null,
          message: aiResponseText,
          associate1: null,
          associate2: null,
          associate3: null
        };
      }

      // 处理AI回复
      const aiMessage = {
        id: Date.now() + 1,
        type: 'ai',
        content: aiResponse.message,
        timestamp: new Date()
      };

      setChatMessages(prev => [...prev, aiMessage]);

      // 更新建议问题
      if (aiResponse.associate1 || aiResponse.associate2 || aiResponse.associate3) {
        const newSuggestions = [
          aiResponse.associate1,
          aiResponse.associate2,
          aiResponse.associate3
        ].filter(q => q && q.trim());

        if (newSuggestions.length > 0) {
          setSuggestedQuestions(newSuggestions);
        }
      }

      // 如果status为1，说明AI生成了数据，需要应用到参数设置
      if (aiResponse.status === 1 && aiResponse.data && Array.isArray(aiResponse.data)) {
        // 切换到参数设置标签
        setActiveTab('settings');

        // 设置为自定义数据模式
        setDataMode('custom');

        // 填入AI生成的数据
        const dataString = aiResponse.data.join(', ');
        setCustomData(dataString);

        // 清除错误信息
        setDataError('');
      }

      // 更新对话历史
      setAiChatHistory([
        ...newChatHistory,
        { role: "assistant", content: aiResponseText }
      ]);

    } catch (error) {
      console.error("获取AI回复失败:", error);
      const errorMessage = {
        id: Date.now() + 1,
        type: 'ai',
        content: "抱歉，我暂时无法回复。请稍后再试。",
        timestamp: new Date()
      };
      setChatMessages(prev => [...prev, errorMessage]);
    } finally {
      setIsAIResponding(false);
    }
  };

  // 处理建议问题点击
  const handleSuggestedQuestionClick = (question) => {
    setChatInput(question);
    handleSendMessage(question);
  };

  // 完成排序
  const completeSorting = () => {
    runningStateRef.current.isRunning = false;
    runningStateRef.current.isPaused = false;
    runningStateRef.current.isStepping = false;

    setIsRunning(false);
    setIsPaused(false);
    setIsStepping(false);

    // 标记所有元素为已排序
    if (barsRef.current) {
      barsRef.current.forEach(bar => {
        if (bar) {
          bar.classList.remove('pivot', 'comparing', 'swapping', 'left-partition', 'right-partition', 'current-range');
          bar.classList.add('sorted');
        }
      });
    }

    setStatus('快速排序完成！');
  };

  // 执行分区操作
  const performPartition = async (left, right, pivotIndex) => {
    const pivotValue = dataRef.current[pivotIndex];

    // 高亮基准值
    if (barsRef.current[pivotIndex]) {
      barsRef.current[pivotIndex].classList.add('pivot');
    }

    setStatus(`选择基准值 ${pivotValue}，开始分区操作`);
    await sleep(animationSpeed);

    // 将基准值移到末尾
    if (pivotIndex !== right) {
      await swapBars(pivotIndex, right);
      [dataRef.current[pivotIndex], dataRef.current[right]] = [dataRef.current[right], dataRef.current[pivotIndex]];
      setData([...dataRef.current]);

      // 更新基准值位置
      if (barsRef.current[pivotIndex]) {
        barsRef.current[pivotIndex].classList.remove('pivot');
      }
      if (barsRef.current[right]) {
        barsRef.current[right].classList.add('pivot');
      }
    }

    let i = left;

    // 分区过程
    for (let j = left; j < right; j++) {
      if (!runningStateRef.current.isRunning || (runningStateRef.current.isPaused && !runningStateRef.current.isStepping)) {
        return i;
      }

      // 高亮当前比较的元素
      if (barsRef.current[j]) {
        barsRef.current[j].classList.add('comparing');
      }

      setStatus(`比较 ${dataRef.current[j]} 和基准值 ${pivotValue}`);
      await sleep(animationSpeed / 2);

      if (dataRef.current[j] <= pivotValue) {
        // 需要交换到左分区
        if (i !== j) {
          setStatus(`${dataRef.current[j]} <= ${pivotValue}，移动到左分区`);

          // 标记交换的元素
          if (barsRef.current[i]) {
            barsRef.current[i].classList.add('swapping');
          }
          if (barsRef.current[j]) {
            barsRef.current[j].classList.add('swapping');
          }

          await sleep(animationSpeed / 3);

          // 执行交换
          await swapBars(i, j);
          [dataRef.current[i], dataRef.current[j]] = [dataRef.current[j], dataRef.current[i]];
          setData([...dataRef.current]);

          // 清除交换样式
          if (barsRef.current[i]) {
            barsRef.current[i].classList.remove('swapping');
            barsRef.current[i].classList.add('left-partition');
          }
          if (barsRef.current[j]) {
            barsRef.current[j].classList.remove('swapping');
          }
        } else {
          setStatus(`${dataRef.current[j]} <= ${pivotValue}，已在左分区`);
          if (barsRef.current[j]) {
            barsRef.current[j].classList.add('left-partition');
          }
          await sleep(animationSpeed / 3);
        }
        i++;
      } else {
        setStatus(`${dataRef.current[j]} > ${pivotValue}，保持在右分区`);
        if (barsRef.current[j]) {
          barsRef.current[j].classList.add('right-partition');
        }
        await sleep(animationSpeed / 3);
      }

      // 清除比较样式
      if (barsRef.current[j]) {
        barsRef.current[j].classList.remove('comparing');
      }

      setCurrentStep(prev => prev + 1);

      if (runningStateRef.current.isStepping) {
        runningStateRef.current.isPaused = true;
        setIsPaused(true);
        setStatus(prev => prev + ' - 等待下一步');
        return i;
      }
    }

    // 将基准值放到正确位置
    setStatus(`将基准值 ${pivotValue} 放到正确位置 ${i}`);
    await swapBars(i, right);
    [dataRef.current[i], dataRef.current[right]] = [dataRef.current[right], dataRef.current[i]];
    setData([...dataRef.current]);

    // 清除所有分区相关的样式
    for (let k = left; k <= right; k++) {
      if (barsRef.current[k]) {
        barsRef.current[k].classList.remove('pivot', 'comparing', 'swapping', 'left-partition', 'right-partition');
      }
    }

    // 标记基准值为已排序
    if (barsRef.current[i]) {
      barsRef.current[i].classList.add('sorted');
    }

    return i;
  };

  // 执行排序步骤
  const runSortingStep = async () => {
    // 检查是否应该停止
    if (!runningStateRef.current.isRunning || (runningStateRef.current.isPaused && !runningStateRef.current.isStepping)) {
      return;
    }

    const { stack, phase } = sortingState.current;

    // 检查是否完成排序
    if (stack.length === 0 && phase === 'idle') {
      completeSorting();
      return;
    }

    if (phase === 'idle' && stack.length > 0) {
      // 从栈中取出下一个待排序区间
      const { left, right } = stack.pop();

      if (left < right) {
        sortingState.current.currentLeft = left;
        sortingState.current.currentRight = right;
        sortingState.current.phase = 'partition';

        // 高亮当前处理的区间
        for (let i = left; i <= right; i++) {
          if (barsRef.current[i]) {
            barsRef.current[i].classList.add('current-range');
          }
        }

        setStatus(`处理区间 [${left}, ${right}]，长度: ${right - left + 1}`);
        await sleep(animationSpeed / 2);

        // 选择基准值（这里选择最后一个元素）
        sortingState.current.pivotIndex = right;

        if (runningStateRef.current.isStepping) {
          runningStateRef.current.isPaused = true;
          setIsPaused(true);
          setStatus(prev => prev + ' - 等待下一步');
          return;
        }
      } else {
        // 区间长度为1或0，标记单个元素为已排序
        if (left === right && barsRef.current[left]) {
          barsRef.current[left].classList.remove('pivot', 'comparing', 'swapping', 'left-partition', 'right-partition', 'current-range');
          barsRef.current[left].classList.add('sorted');
        }

        if (runningStateRef.current.isStepping) {
          runningStateRef.current.isPaused = true;
          setIsPaused(true);
          setStatus(left === right ? '单元素已排序 - 等待下一步' : '无效区间 - 等待下一步');
          return;
        } else {
          // 非单步模式，继续下一步
          const timeoutId = setTimeout(() => {
            if (!runningStateRef.current.isPaused && runningStateRef.current.isRunning) {
              runSortingStep();
            }
          }, animationSpeed / 2);
          animationTimeouts.current.push(timeoutId);
          return;
        }
      }
    } else if (phase === 'partition') {
      // 执行分区操作
      const { currentLeft, currentRight, pivotIndex } = sortingState.current;

      const partitionIndex = await performPartition(currentLeft, currentRight, pivotIndex);

      if (!runningStateRef.current.isRunning) return;

      // 清除当前区间的所有临时样式
      for (let i = currentLeft; i <= currentRight; i++) {
        if (barsRef.current[i]) {
          barsRef.current[i].classList.remove('current-range', 'left-partition', 'right-partition', 'comparing', 'swapping', 'pivot');
        }
      }

      // 将子区间加入栈中（先加右边，再加左边，这样左边会先处理）
      // 处理右子区间
      if (partitionIndex + 1 < currentRight) {
        stack.push({ left: partitionIndex + 1, right: currentRight });
      } else if (partitionIndex + 1 === currentRight) {
        // 右子区间只有一个元素，直接标记为已排序
        if (barsRef.current[currentRight]) {
          barsRef.current[currentRight].classList.add('sorted');
        }
      }

      // 处理左子区间
      if (currentLeft < partitionIndex - 1) {
        stack.push({ left: currentLeft, right: partitionIndex - 1 });
      } else if (currentLeft === partitionIndex - 1) {
        // 左子区间只有一个元素，直接标记为已排序
        if (barsRef.current[currentLeft]) {
          barsRef.current[currentLeft].classList.add('sorted');
        }
      }

      sortingState.current.phase = 'idle';

      if (runningStateRef.current.isStepping) {
        runningStateRef.current.isPaused = true;
        setIsPaused(true);
        setStatus('分区完成 - 等待下一步');
        return;
      }
    }

    setCurrentStep(prev => prev + 1);

    if (!runningStateRef.current.isPaused && runningStateRef.current.isRunning) {
      // 连续执行模式：继续下一步
      const timeoutId = setTimeout(() => {
        if (!runningStateRef.current.isPaused && runningStateRef.current.isRunning) {
          runSortingStep();
        }
      }, animationSpeed / 2);
      animationTimeouts.current.push(timeoutId);
    }
  };

  // 开始排序
  const startSorting = () => {
    if (dataRef.current.length < 2) {
      alert('至少需要2个数据才能进行排序');
      return;
    }

    // 清除之前的所有定时器
    clearAllTimeouts();

    // 同时更新React状态和ref状态
    runningStateRef.current.isRunning = true;
    runningStateRef.current.isPaused = false;
    runningStateRef.current.isStepping = false;

    setIsRunning(true);
    setIsPaused(false);
    setIsStepping(false);
    setStatus('开始快速排序...');

    // 重置排序状态
    resetSortingState();

    // 初始化栈，将整个数组作为第一个区间
    sortingState.current.stack = [{ left: 0, right: dataRef.current.length - 1 }];
    sortingState.current.phase = 'idle';

    // 立即执行，不需要setTimeout
    runSortingStep();
  };

  // 单步执行
  const stepSorting = () => {
    if (dataRef.current.length < 2) {
      alert('至少需要2个数据才能进行排序');
      return;
    }

    // 清除之前的所有定时器
    clearAllTimeouts();

    if (!runningStateRef.current.isRunning && !runningStateRef.current.isPaused) {
      runningStateRef.current.isRunning = true;
      runningStateRef.current.isPaused = false;
      runningStateRef.current.isStepping = true;

      setIsRunning(true);
      setIsPaused(false);
      setIsStepping(true);
      setStatus('单步执行中...');

      // 重置排序状态
      resetSortingState();

      // 初始化栈
      sortingState.current.stack = [{ left: 0, right: dataRef.current.length - 1 }];
      sortingState.current.phase = 'idle';
    } else if (runningStateRef.current.isPaused) {
      runningStateRef.current.isPaused = false;
      runningStateRef.current.isStepping = true;

      setIsPaused(false);
      setIsStepping(true);
      setStatus('单步执行中...');
    }

    // 立即执行下一步
    runSortingStep();
  };

  // 初始化
  useEffect(() => {
    generateRandomData();

    return () => {
      clearAllTimeouts();
    };
  }, []);

  return (
    <div className="quick-sort-playground">
      <div
        ref={containerRef}
        className="quick-sort-container"
        style={{ cursor: isDragging ? 'col-resize' : 'default' }}
      >
        {/* 左侧控制区 */}
        <SortingControlPanel
          leftPanelWidth={leftPanelWidth}
          activeTab={activeTab}
          setActiveTab={setActiveTab}
          data={data}
          dataMode={dataMode}
          setDataMode={setDataMode}
          customData={customData}
          setCustomData={setCustomData}
          dataError={dataError}
          dataSize={dataSize}
          setDataSize={setDataSize}
          handleGenerateData={handleGenerateData}
          handleCustomDataChange={handleCustomDataChange}
          animationSpeed={animationSpeed}
          setAnimationSpeed={setAnimationSpeed}
          isRunning={isRunning}
          isPaused={isPaused}
          isStepping={isStepping}
          startSorting={startSorting}
          stepSorting={stepSorting}
          pauseSorting={pauseSorting}
          stopSorting={stopSorting}
          status={status}
          currentStep={currentStep}
          totalSteps={totalSteps}
          chatMessages={chatMessages}
          chatInput={chatInput}
          setChatInput={setChatInput}
          isAIResponding={isAIResponding}
          handleSendMessage={handleSendMessage}
          suggestedQuestions={suggestedQuestions}
          handleSuggestedQuestionClick={handleSuggestedQuestionClick}
          algorithmName="快速排序"
        />

        {/* 拖拽分隔条 */}
        <div
          className="resize-handle"
          onMouseDown={handleMouseDown}
        />

        {/* 右侧动画面板 */}
        <div className="animation-panel" style={{ width: `calc(100% - ${leftPanelWidth + 10}px)` }}>
          <h2>动画展示</h2>
          <div className="animation-area">
            <div ref={dataDisplayRef} className="data-display">
              {/* 数据条形图将在这里显示 */}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default QuickSortPlayground;
